<script setup>
import { ref, onMounted, defineProps, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { useUserStore } from "../plugins/pinia";

// 定义 props
const props = defineProps({
  bookId: {
    type: [String, Number],
    required: true,
  },
});

const { proxy } = getCurrentInstance();
const userStore = useUserStore();

// 图书数据
const book = ref({
  name: "",
  auther: "",
  content: "",
  stars: 0,
  time: "",
  view_sum: 0,
  category: "",
  img_url: "",
});

// 用户评分
const userRating = ref(0);
const hasRated = ref(false); // 标志位，记录用户是否已评分

// 获取图书详情
const fetchBookDetails = async () => {
  try {
    const response = await proxy.$axios.get(`/book/${props.bookId}`);
    if (response.status === 200) {
      book.value = response.data.data;
    }
  } catch (error) {
    console.error("Error fetching book details:", error);
  }
};

// 增加浏览数
const addView = async () => {
  try {
    const response = await proxy.$axios.get(`/book_add/${props.bookId}`);
    if (response.status === 200) {
      console.log(response.data.data);
    }
  } catch (error) {
    console.error("Error adding view:", error);
  }
};

// 提交评分
const submitRating = async () => {
  if (hasRated.value) {
    // 如果用户已评分，显示提示信息
    ElMessage.info("您已进行过评分");
    return;
  }

  try {
    const response = await proxy.$axios.post('/book_stars', {
        bookId: props.bookId, 
        rating: userRating.value
      });
    if (response.status === 200) {
      ElMessage.success("评分提交成功");
      hasRated.value = true; // 设置标志位，表示用户已评分
      fetchBookDetails(); // 更新图书详情
    }
  } catch (error) {
    console.error("Error submitting rating:", error);
    ElMessage.error("评分提交失败");
  }
};

// 初始化加载
onMounted(() => {
  fetchBookDetails();
  addView();
});

// 返回到书单列表
const goBackToBooks = () => {
  proxy.$emit("navigateTorecommend");
};
</script>

<template>
  <div class="book-details-container">
    <!-- 卡片内容 -->
    <el-card class="book-card" shadow="hover">
      <!-- 图书标题 -->
      <h2 class="book-title">{{ book.name }}</h2>
      <h6 class="book-author">作者: {{ book.auther }}</h6>
      <p class="book-meta">
        出版时间: {{ book.time }} | 浏览数: {{ book.view_sum }}
      </p>
      <p class="book-category">
        分类: <span class="category-tag">{{ book.category }}</span>
        <span class="book-rating">
          评分: 
          <el-rate
            v-model="book.stars"
            disabled
            show-score
            text-color="#ff9900"
          />
        </span>
      </p>

      <!-- 图书图片 -->
      <div class="image-preview">
        <el-image
          :src="book.img_url"
          alt="图书图片"
          style="width: 200px; height: 300px; object-fit: cover; border-radius: 5px;"
        />
      </div>

      <!-- 图书内容 -->
      <div class="book-content">
        <h4>简介</h4>
        <p>{{ book.content }}</p>
      </div>

      <!-- 用户评分 -->
      <div class="user-rating">
        <h6>留下你的评分!</h6>
        <el-rate
          v-model="userRating"
          allow-half
          show-score
          text-color="#ff9900"
          :disabled="hasRated"
          @click="submitRating"
        />
      </div>

      <!-- 返回按钮 -->
      <div class="back-to-books">
        <el-button type="primary" @click="goBackToBooks">返回书单列表</el-button>
      </div>
    </el-card>
  </div>
</template>


<style scoped>
.book-details-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
  border-radius: 8px;
}

.book-card {
  padding: 20px;
  max-width: 800px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s;
}

.book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.book-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.book-author {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.book-meta {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}

.book-category {
  margin-bottom: 20px;
}

.category-tag {
  font-weight: bold;
  color: #409eff;
}

.book-rating {
  margin-left: 20px;
}

.image-preview {
  text-align: center;
  margin-bottom: 20px;
}

.book-content {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.user-rating {
  margin-top: 20px;
  text-align: center;
}

.back-to-books {
  text-align: center;
}
</style>
